// User Pic 用户头像

@mixin e-user-pic-size($image-size, $font-size) {
    img {
        width: 100%;
        max-width: $image-size;
        height: $image-size;
    }

    span {
        width: $image-size;
        height: $image-size;

        @if $font-size {
            font-size: $font-size;
        }
    }
}

.e-user-pic {         
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: cover;
        
    @include e-rounded {
        border-radius: $e-border-radius;
    }
    
    @include e-user-pic-size(50px, 1.3rem);

    img {        
        @include e-rounded {
            border-radius: $e-border-radius;
        }      
    }
        
    span {
        display: flex;       
        align-items: center;
        justify-content: center;         
        font-weight: 600;
            
        @include e-rounded {
            border-radius: $e-border-radius;
        }
    }        
        
    
    @each $name, $color in $e-state-colors {
        &.e-user-pic-#{$name} {
            span {                       
                background: rgba(e-get($color, base), .1);
                color: e-get($color, base);
            }                         
        }
    }      
         
    
    // 尺寸
    &.e-user-pic--sm {
        @include e-user-pic-size(30px, .8rem);
    }
    
    &.e-user-pic--lg {
        @include e-user-pic-size(60px, 1.3rem);
    }
    
    &.e-user-pic--xl {
        @include e-user-pic-size(80px, 1.7rem);
    }
    
    // 圆形
    &.e-user-pic--circle {
        @include e-rounded {
            border-radius: 50%;
        }  

        img {
            @include e-rounded {
                border-radius: 50%;
            }  
        } 
            
        span {
            @include e-rounded {
                border-radius: 50%;
            }              
        } 
    } 
}
 

 